<template>
  <div class="AttendClass_container">
    <div >
      <div :v-model="data" v-for="item in data" :key="item.courseId" class="box-card" >
      <el-row   type="flex">
        <el-col :span="12" class="class_col">
          <el-row class="class_name newClass">
            <span class="dot"></span>
            {{ item.courseName }}
          </el-row>
          <el-row class="newClassTime" :style="{'padding-left':'25px'}">
            时间:2022.01.17-2022.01.21(全天有课)
          </el-row>
          <el-row :style="{'padding-left':'25px'}">
            老师:刘学良  教室:长沙新411
          </el-row>
        </el-col>
        <el-col :span="12" class="disabled_button" justify="end">
          <el-row type="flex" class="studyCase" span="30"  >
            <el-col :span="5" >
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-video-play"></i>看视频
              </el-button>
            </el-col>
            <el-col :span="5" >
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-video-camera-solid"></i>看录播
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-s-postcard"></i>随堂测
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-collection"></i>每日反馈
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-edit"></i>练习
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-reading"></i>作业
              </el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourse } from '@/api/course.js'
export default {
  data () {
    return {
      data: '',
      page: {
        lengths: null
      }
    }
  },
  created () {
    this.changePage()
  },
  methods: {
    async getCourse () {
      const { data } = await getCourse()
      console.log('data', data)
      this.page.lengths = data.length
      this.data = data
      console.log(this.data)
    },
    changePage (newPage) {
      // newPage是当前点击的页码
      this.page.currentPage1 = newPage // 将当前页码赋值给当前的最新页码
      this.getCourse()
    }
  }
}
</script>

<style lang="scss">
.AttendClass_container{
  .box-card {
    padding-left: 25px;
    margin-bottom: 20px;
    .class_col {
      font-size: 12px;
      .class_name {
        font-size: 18px;
        color: #247ffc;
        img {
          width: 15px;
          height: 15px;
          background-size: 20px;
        }
      }
      .newClass {
          color: black;
          .dot {
            width: 6px;
            height: 6px;
            background-color: #828ca0;
            border-radius: 6px;
            margin-right: 10px;
            margin-bottom: 19px;
          }
      }
      .newClassTime {
        margin: 10px 0;
      }
    }
    .class_col_two {
      padding-top: 20px;
    }
    .disabled_button{
      padding-top: 20px;
    }
  }
}
</style>
